<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        
header( 'Content-Type:text/html;charset=utf-8 ')
     -->
     
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <script type="text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "h3tfnethmu");
    </script>
    <script>
        var name1 = prompt("请输入你的姓名")
        
            switch (name1){
                case '1':
                zzr = name1
                break;
                case '2':
                zzr = name1
                break;
                case '3':
                zzr = name1
                break;
                default:
                //alert("不在测试者名单，即将返回！")
                //window.history.go(-1)
                //zzr = name1
                zzr = name1
                break;
            }
        
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            font-family: 微软雅黑;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
        }
        ::-webkit-scrollbar{
            width: 0rem;
        }
        
        body{
            background: #F6F6F6;
            display: flex;
            flex-direction: column;
            background: url(https://img.pc841.com/2019/0222/20190222072937647.jpg) no-repeat;
            background-position: center;
            background-size: cover;
            
        }
        header{
            height: 1.5116rem;
            display: flex;
            
            /*子元素垂直居中
            align-items: center;*/
            position: relative;
        }
        header .title{
            display: inline-block;
            width: 3rem;
            height: .3865rem;
            font-size: .3865rem;
            font-weight: 600;
            /*水平居中
            margin: 0 auto;*/
            /*文本水平垂直居中
            text-align: center;*/
            line-height: .3865rem;
            letter-spacing: .0242rem;
            /*位置*/
            position: absolute;
            bottom: .3382rem;
            left: 50%;
            transform: translateX(-0.6rem);

        }
        header .left{
            width: .628rem;
            height: .628rem;
            background-image: url(../images/header/left.webp);
            background-size: contain;
            background-repeat: no-repeat;
            /*位置*/
            position: absolute;
            bottom: .2174rem;
            left: .2174rem;

        }
        header .backBtn{
            width: 1.1rem;
            height: 1.1rem;
            
            /*位置*/
            position: absolute;
            bottom: 0rem;
            left: 0rem;
            position: absolute;
            z-index: 100;
        }
        header .right{
            /**/
            display: none;
            border: .01rem solid #CBCFCC;
            border-radius: 0.38645rem;
            width: 2.1014rem;
            height: .7729rem;
            /**/
            background-image: url(../images/header/right.webp);
            background-size: contain;
            background-repeat: no-repeat;
            /*位置*/
            position: absolute;
            bottom: .1449rem;
            right: .1691rem;

        }
        section{
            flex: 1;
            background-color: #a1a1a114;
            display: flex;
            flex-direction: column;/*
            justify-content: center;*/
            align-items: center;/*
            position: relative;*/
        }
        
        .t1{
            /**/
            border: .1208rem solid #188c93;
            border-radius: .2415rem;
            display: inline-block;
            width: 3.8647rem;
            height: 1.57rem;
            font-size: .9662rem;
            line-height: 1.57rem;
            text-align: center;
            color: #188c93;
            font-weight: 600;
            letter-spacing: .0725rem;/*
            position: absolute;*/
            margin-top: .4831rem;
            animation: run1 3s infinite;
        }
        /**/
        @keyframes run1 {
            0%{
                transform: scale(0.8);
            }
            50%{
                transform: scale(1.1);
            }
            100%{
                transform: scale(0.8);
            }
        }

        .box{
            /*
            border: .0966rem solid #188c93;*/
            border-radius: .2415rem;
            width: 90%;
            min-height: 2.4155rem;/*
            position: absolute;*/
            margin-top: 1.2077rem;
            box-sizing: border-box;
            padding: .4831rem;
        }
        .icon{
            border-radius: .2415rem;
            width: 3.5024rem;
            height: 4.5894rem;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            position: relative;
            margin: 0 auto;
            
            /*
            
            animation: ;*/
            
        }
        @keyframes run2 {
            0%{
                
            }
            /**/
            10%{
                transform: scale(1.1);
                box-shadow: .3623rem .3623rem .2415rem rgba(0, 0, 0, 0.72);
            }
            
            
            100%{
                transform: rotateY(180deg);
            }
        }
        .icon div{
            border-radius: .2415rem;
            width: 100%;
            height: 100%;
            position: absolute;/*
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;*/


            
            font-weight: 600;
            text-align: center;
            
        }
        .a{
            /**/
            transform: translateZ(-1px);
            transform: rotateY(180deg);
            font-size: .7246rem;
            line-height: 4.5894rem;
            color: #23969d;
            background: #eeeeee;

        }
        .b{
            transform: translateZ(1px);
            font-size: 1.8116rem;
            color: #fff;
            background: #16868d;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;



            position: relative;
        }
        #T{
            /*
          animation: runT 3s infinite; */ 
        }

        @keyframes runT {
            0%{
                transform: scale(0.8);
            }
            50%{
                transform: scale(1.4);
            }
            100%{
                transform: scale(0.8);
            }
        }
        .b span{
            display: inline-block;
            
        }
        
        .b .text1{
            position: absolute;
            bottom: .2415rem;
            opacity: calc(0.8);
            font-size: .2415rem;
            letter-spacing: .0121rem;
            font-weight: 300;
        }
        .text1 span{
           font-weight: 800;
           opacity: calc(1);
        }






        .form .btn{
            border: none;
            border-radius: .2831rem;
            width: 80%;
            height: 1.2077rem;
            background-color: #3579F6;
            font-size: .43rem;
            color: #fff;
            letter-spacing: .07rem;
            line-height: 1.2077rem;
            text-align: center;

        }
        footer{
            /*
            height: 1.4734rem;*/
            height: 0rem;
        }
    </style>
    <!-- 参数接收处理 ?test=logo-->
    <script>
        /*
        window.onload=function(){
            let params1 = location.search.substr(1)//去除链接含参部分的问号 >> test=logo
            console.log("去？ params1: "+params1)
            console.log("typeof params1: "+typeof params1)
            let test1 = params1.split('=') // >> test,logo 对象数据类型
            console.log("去= test1: "+test1)
            console.log("typeof test1: "+typeof test1)
            let test = test1[1]
            console.log("test: "+test)
            console.log("typeof test: "+typeof test)
            switch(test){
                case 'logo':
                var a1 = document.querySelector('ul li:nth-child(1) a')
                a1.innerHTML='logo测试正常!'
                a1.style.background='#1ad315'
                a1.style.color='#fff'
                break;
                case 'ad':
                var a2 = document.querySelector('ul li:nth-child(2) a')
                a2.innerHTML='广告测试正常!'
                a2.style.background='#1ad315'
                a2.style.color='#fff'
                break;
                case '404':
                var a3 = document.querySelector('ul li:nth-child(3) a')
                a3.innerHTML='404测试正常!'
                a3.style.background='#1ad315'
                a3.style.color='#fff'
                break;
                default:
                break;
                

            }
        }
        */

        
    </script>
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">猜数字</span>
        <div class="right"></div>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
        document.querySelector(".right").onclick=function(){
            window.location.replace('./index.html')
        }
    </script>
    <section>
        <span class="t1">猜数字</span>
        <div class="box">
            <div class="icon">
                <div class="a">12345</div>
                <div class="b">
                    <span id="T">?</span>
                    <span class="text1">赞助人:<br><span class="name" style="font-weight: 600;">`${zzr}`</span></span>
                    <script>
                        document.querySelector(".name").innerHTML=zzr
                    </script>
                </div>
            </div>
        </div>
    </section>


    <footer>

    </footer>


    <script>
        //产生随机数
        function rand(){
            
            //Number = Math.ceil(Math.random()*100000)
            Number1 = Math.floor(Math.random()*10000)
            document.querySelector(".a").innerHTML=Number1
            console.log(Number1)
        }
        //document.body.onclick= rand
        //window.onload=rand

        //倒计时
        /**/
        var n = 5;
            function f11(){
                if(n >= 0){
                    document.getElementById("T").innerHTML=n

                    console.log(n)
                    n--;
                }else{
                    clearInterval(interval1)
                    console.log("计时器已清除！")
                    document.getElementById("T").innerHTML='?'
                    document.getElementById("T").style.animation=' runT 3s infinite'
                    //产生随机数
                    rand()
                    var Timeout = setTimeout(function(){
                        start(1)
                        clearTimeout(Timeout)
                    }, 300)
                    
                }


            }
            f11()
            var interval1 = setInterval(function(){
                f11()
            },1000)











        cs = 0;//次数
        function start(i) {
            switch (i){
                case 1:
                txt = "请输入数字"
                break;
                case 2:
                txt = "答案比这个数大，请重新输入"
                break;
                case 3:
                txt = "答案比这个数小，请重新输入"
                break;
                case 4:
                txt = "范围：1~10000，请重新输入"
                break;
                case 5:
                //破解
                txt = "正确答案"+Number1+"，请重新输入"
                break;
                

            }
            var number = prompt(txt)
            if(number == null || number == ""){
                res='未输入！'
                
                start(1)
                
            }else if(number > 0 && number <= 10000){
                res = number
                var Timeout1 = setTimeout(function(){
                    cs++
                    if(res < Number1){
                        start(2)
                    }else if(res > Number1){
                        start(3)
                    }else if(res = Number1){
                        //答案正确
                        success()
                    }
                },500)
            }else if(number == 'end'){
                window.history.go(-1)
            }else if(number == 'getresult'){
                cs++
                start(5)
            }else{
                cs++
                start(4)
            }
        }




        function success(){
            //document.querySelector(".icon").style.animation='run2 1.5s'
            shake()
            document.querySelector(".icon").style.transition='1.5s'
            document.querySelector(".icon").style.transform='rotateY(180deg)'
            setTimeout(function(){
                window.alert("恭喜你猜对了！猜了"+cs+"次猜对的哦。")
            }, 1500)
            
        }
        
    </script>



    <script>
        //震动
        function shake(){
            //Vibration接口用于在web浏览器中发出指令，让移动端设备振动。其中要判断是否支持此方法
            function vibration() {
                navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
                if (navigator.vibrate) {
                    return true;
                }else{
                    return false;
                }
            }
            //[震动时间，停止时间，震动时间，停止时间…] 
            //[200,100,200, 200,100, 200.........]
            if (vibration()==true){
                
                navigator.vibrate([380,100]);












            }else{
                console.log("设备不支持震动")
            }   
        }
    </script>







    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>
